import columnsData, { ColumnsItem } from './data'
import React, { useRef } from 'react';
import { Modal, Descriptions, Form, Input, Button } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { getWithdrawApplyList } from './service'
import TableTitle from '@/components/TableTitle';

const { TextArea } = Input;

export default () => {
  // 控制拒绝原因弹框的显示与隐藏
  const [refuseModal, setRefuseModal] = React.useState(false)
  // 储存未处理申请条数
  const [pending, setPending] = React.useState(null)
  // 表头赋值
  const columns: ProColumns<ColumnsItem>[] = columnsData

  /**
   * 批准按钮回调
   * @param serialNumber 流水号
   */
  const handleApproval = async (serialNumber: string) => {
    console.log('handleApproval');

  }

  // 定义操作单元格
  const columnsRender = (text, record, _, action) => {
    if (record.approvalStatus === '未处理') {
      return [
        <ul className="ant-list-item-action" style={{ margin: 0 }}>
          <li>
            <a
              onClick={() => handleApproval(record)}
            >
              批准
            </a>
            <em className="ant-list-item-action-split"></em>
          </li>
          <li>
            <a key='refuse'
              onClick={() => setRefuseModal(true)}
            >
              拒绝
            </a>
          </li>
        </ul>
      ]
    }
    return <div key={record.approvalStatus}></div>
  }

  // 定义金额单元格
  const amountRender = (text, record, _, action) => [
    <p key={record.withdrawAmount} style={{ textAlign: 'right', margin: 0 }}>{record.withdrawAmount}</p>
  ]
  // 定义结果单元格
  const resultRender = (text, record, _, action) => [
    <div key={record.result}>
      {
        record.result === 'Processing' ?
          <p style={{ textAlign: 'center', margin: 0 }}>交易中</p> :
          record.result === 'Success' ?
            <p style={{ textAlign: 'center', margin: 0, color: '#52c41a' }}>成功</p> :
            record.result === 'Failure' ?
              <p style={{ textAlign: 'center', margin: 0, color: '#ff4d4f' }}>失败</p> :
              null
      }
    </div>
  ]
  // 列渲染样式赋值
  columns.forEach(item => {
    item.dataIndex === 'result' ? item.render = resultRender : undefined
    item.dataIndex === 'withdrawAmount' ? item.render = amountRender : undefined
    item.valueType === 'option' ? item.render = columnsRender : undefined
  })
  // Table action 的引用，便于自定义触发
  const actionRef = useRef<ActionType>();

  // 表单提交成功
  const onFinish = (values: any) => {
    console.log('Success:', values);
    setRefuseModal(false)
  };

  // 表单提交失败
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      {/* 表格 */}
      <ProTable<ColumnsItem>
        scroll={{ x: 900 }}
        bordered
        headerTitle={<TableTitle title='提现审批' />}
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => {
          return getWithdrawApplyList(params).then((res) => {
            setPending(res.pending)
            return res
          });
        }}
        // 本地储存表格列的显示参数
        columnsState={{
          persistenceKey: 'withdrawApplyList',
          persistenceType: 'localStorage',
        }}
        // 每行表格的key
        rowKey="approvalNumber"
        // 搜索表单布局配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单配置
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        // 分页相关配置
        pagination={{
          // 初始页面数据条数
          pageSize: 10,
        }}
        dateFormatter="string"
      />
      <Modal
        title="拒绝原因"
        visible={refuseModal}
        centered
        onCancel={() => setRefuseModal(false)}
        footer={[]}
      >
        <Form
          name="basic"
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            key="refusalCause"
            name="refusalCause"
            rules={[{ required: true, message: '请填写拒绝原因' }]}
          >
            <TextArea rows={4} />
          </Form.Item>

          <Form.Item
            key='btn'
            wrapperCol={{ offset: 10, span: 14 }}
          >
            <Button type="primary" htmlType="submit">
              确认
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};